<template>
  <div class="app-container">
    <el-row :gutter="20">
       <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme"> 
       <!-- <el-col :span="4" :xs="24">  -->
         <pane size="16"> 
          <el-col>
      
        <div class="search-container">
          <el-input
            placeholder="搜索节点"
            v-model="searchQuery"
            clearable
            @input="handleSearch"
          />
          <!-- 竖线 -->
          <!-- <div class="vertical-line"></div> -->
        </div>
        <div class="head-container">
          <el-tree
            :data="parentAccountName"
            :props="defaultProps"
            :expand-on-click-node="true"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
       </pane> 
        
       <pane size="84"> 
      <!-- <el-col :span="20" :xs="24"> -->
        <el-col>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
          <el-form-item label="地区编码" prop="编码">
            <el-input
              v-model="queryParams.编码"
              placeholder="请输入地区编码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="地区代码" prop="代码">
            <el-input
              v-model="queryParams.代码"
              placeholder="请输入地区代码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="地区名称" prop="名称">
            <el-input
              v-model="queryParams.名称"
              placeholder="请输入地区名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
          
        </el-form>
        
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="120px" class="custom-form" :model="form">
  <el-form-item label="地区编码">
    <el-input v-model="form.areaCode" placeholder="请输入地区编码"></el-input>
  </el-form-item>
  <el-form-item label="地区代码">
    <el-input v-model="form.regionCode" placeholder="请输入地区代码"></el-input>
  </el-form-item>
  <el-form-item label="地区名称">
    <el-input v-model="form.areaName" placeholder="请输入地区名称"></el-input>
  </el-form-item>
  <el-form-item label="隶属于">
    <el-select v-model="form.belongsTo" placeholder="请选择" style="width: 100%;">
        <el-option label="地区A" value="departmentA"></el-option>
        <el-option label="地区B" value="departmentB"></el-option>
        <!-- 可以根据需要添加更多选项 -->
      </el-select>
  </el-form-item>
  <!-- 如果需要提交按钮 -->
  <!-- <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item> -->
      </el-form>
      </el-col>
     </pane>
    </splitpanes>  
    </el-row>  
    <!-- 新增按钮触发弹窗 -->
      <el-dialog title="编辑地区信息" :visible.sync="dialogVisible" width="30%" center>
        <el-form :model="currentForm" class="demo-ruleForm" label-width="120px">
          <el-form-item label="地区编码">
            <el-input v-model="currentForm.areaCode" placeholder="请输入地区编码"></el-input>
          </el-form-item>
          <el-form-item label="地区代码">
            <el-input v-model="currentForm.regionCode" placeholder="请输入地区代码"></el-input>
          </el-form-item>
          <el-form-item label="地区名称">
            <el-input v-model="currentForm.areaName" placeholder="请输入地区名称"></el-input>
          </el-form-item>
          <el-form-item label="隶属于">
            <el-select v-model="currentForm.belongsTo" placeholder="请选择" style="width: 100%;">
              <el-option label="地区A" value="departmentA"></el-option>
              <el-option label="地区B" value="departmentB"></el-option>
              <!-- 可以根据需要添加更多选项 -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
  </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";

export default{
components: { Splitpanes, Pane },
data() {
  return {
    labelPosition: 'right',
    form: {
      areaCode: '',
      regionCode: '',
      areaName: '',
      belongsTo: ''
    },
    parentAccountName:[{
      label:'地区资料树',
      children:[{
        label: '国内',
        children: [{
          label: '辽宁',
          children: [{
            label:'吉林',
          },{
          label: '大连',
        },{
          label:'鞍山',
      }]
      }]
       },{
        label:'国外',
        children:[{
          label: '欧洲',
        },
          {label: '南美',
      },{
          label: '北美',
      },{
          label: '中东'
      }]
      }]
    }],
  
    defaultProps: {
        children: 'children',
        label: 'label'
    },
    queryParams:{},
    showSearch: true,
    dialogVisible: false, // 控制弹窗显示
    currentForm: { // 新增表单数据
      areaCode: '',
      regionCode: '',
      areaName: '',
      belongsTo: ''
    },
    single: false,
    multiple: false,
    tableData:[],
    // labelPosition: 'left', // 或者 'top'，根据您的图片样式选择
    // formLabelAlign: {
    //   areaCode: '010602',
    //   regionCode: '010602',
    //   areaName: '大连',
    //   belongsTo: ''
    // }
  };
},
methods: {
  filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data){
      console.log(data);
    },
  //   handleAdd(){},
  //   handleUpdate(){},
  //   handleDelete(){},
  //   handleExport(){},
  //   handleSelectionChange(selection) {
  //   this.ids = selection.map((item) => item.userId);
  //   this.single = selection.length !== 1;
  //   this.multiple = !selection.length;
  // },
  handleAdd() {
    // 重置当前表单数据
    this.currentForm = { ...this.formLabelAlign };
    // 显示弹窗
    this.dialogVisible = true;
  },
  handleUpdate() {
    this.dialogVisible = true; 
  },
  // handleUpdate, handleDelete, handleExport 方法省略，与原始代码相同
  saveForm() {
    // 保存表单数据到formLabelAlign或执行其他逻辑
    this.formLabelAlign = { ...this.currentForm };
    // 关闭弹窗
    this.dialogVisible = false;
    // 可以添加其他保存逻辑，如发送到服务器
  },
},
}
</script>


